<template>
  <!-- <el-scrollbar> -->

  <navBarComponents />
  <backgroundComponents v-if="$store.state.Pk.status == 'matching'" />
  <div style="min-height: 76vh;">
    <div v-if="$route.meta.base">
      <baseComponents>
        <div>
          <router-view>
          </router-view>
        </div>
      </baseComponents>
    </div>
    <div v-else>
      <div>
        <router-view>
        </router-view>
      </div>
    </div>
  </div>

  <footerComponents />
  <!-- </el-scrollbar> -->

</template>

<script>
import navBarComponents from './components/global/navBarComponent.vue';
import baseComponents from './components/global/baseComponents.vue';
import footerComponents from './components/global/footerComponents';
import backgroundComponents from '@/components/global/backgroundComponents.vue';

import { ref } from 'vue';
import { useStore } from 'vuex';
import $ from 'jquery';
export default {
  components: {
    navBarComponents,
    baseComponents,
    footerComponents,
    backgroundComponents,
  },
  setup() {
    const store = useStore();
    if (localStorage.getItem("token") != null) {//每次检验下token是否有效
      $.ajax({
        type: "post",
        url: "http://124.221.73.180:3000/userInfo/tokenInfo/",
        cache: false,
        async: false,
        headers: {
          "satoken": localStorage.getItem("token"),
        },
        success(resp) {

          let t = ref({
            name: JSON.parse(resp).name,
            token: localStorage.getItem("token"),
            photo: JSON.parse(resp).photo,
            id: JSON.parse(resp).id,
          });
          store.dispatch("login", t.value);
        }, error() {
          localStorage.clear();
        }
      });
    }
  }
}

</script>
<style>
body {
  background-image: url("../public/壁纸.png");
  margin: 0px;
  font-family: "微软雅黑", "宋体", serif;
  background-size: cover;
  background-attachment: fixed;
  /* 背景图像固定 */
}

#app {
  min-height: 100vh;
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(73, 177, 245);
  /* border-radius: 10px; */
}

/* 隐藏滚动条 */
::v-deep ::-webkit-scrollbar {
  display: none;
}

/* :deep(.el-scrollbar) {
  height: 100px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
} */
</style>
